<template>
  <div class="start-flow-view-buttons">
    <div class="start-flow-view-button" @click="changeView">
      视图切换
    </div>
    <div @click="showFlow" class="start-flow-view-button">
      查看流程
    </div>
  </div>
  <StartFlowViewFlowPopup :flowId="flowId" :formDefinition="formDefinition" v-model:show="flowPopupShow" />
</template>
<script setup>

import {createFormDefinition, createProps} from '@/utils';
import {shallowRef} from 'vue';
import StartFlowViewFlowPopup from '@/views/StartFlowView/StartFlowViewFlowPopup/StartFlowViewFlowPopup.vue';

const props = defineProps({
  formDefinition: createProps(Object, createFormDefinition),
  flowId: createProps(String),
  viewId: createProps(String),
});
const flowPopupShow = shallowRef(false)

defineOptions({name: 'StartFlowViewButtons'})
const emits = defineEmits(['update:viewId'])

function showFlow() {
  flowPopupShow.value = true;
}

function changeView() {
  let flowId = props.flowId;
  let formDefinition = props.formDefinition;

  let flows = formDefinition.flows || [];
  let flow = flows.find(f => f.id === flowId);

  if (flow) {
    if(props.viewId === flow.mobileView) {
      // viewId.value = flow.pcView;
      emits('update:viewId', flow.pcView);
    } else {
      // viewId.value = flow.mobileView;
      emits('update:viewId', flow.mobileView);
    }
  }
}

</script>
<style scoped lang="less">
.start-flow-view-buttons {
  background: #f4f5fa;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #377be8;
}

.start-flow-view-button {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}
</style>